// ========== 重要提示 ========== //
// AI 助手请注意：
// 1. 请不要修改此页面模板文件，此文件是项目代码风格的权威参考标准
// 2. 您在生成任何页面代码时，必须完全严格地遵循此模板中的所有代码风格、缩进规范和编码惯例
// 3. 此模板中的每一个空格、换行、缩进、注释格式都代表了项目的标准，必须100%遵循
// 4. 任何与此模板不一致的代码都会被视为不规范代码
// 5. 重要规范：所有的样式都必须写到对应的 module.less 文件里面去，禁止在组件文件中直接写内联样式
// 6. 核心样式导入规范：必须使用模块的方式导入样式，即通过import styles from './xxx.module.less'的方式
// 7. 严格禁止：绝对不允许直接导入module.less文件而不使用模块语法
// 8. 移除所有方法前的private或public关键字
// 9. 清理所有注释掉的代码和未使用的变量、函数
// 10. 移除所有空规则的 CSS 类名（即没有实际样式属性的CSS类）
// 11. 页面样式必须尽可能使用 Ant Design 组件库，优先使用 antd 提供的组件来构建界面
// 12. 使用 antd 组件时，请注意查看最新文档，避免使用已废弃的属性和API
// 13. 代码的注释要尽可能的简洁，节约行数，少写点空行
// 14. 当一个元素有多个 class 类名时，需要使用 clsx 来组合这些 CSS 类名
// 15. 每个页面都需要引入对应的store
// 16. PC端使用observer来包裹组件，使mobx可以监听状态变化
// 17. 组件函数不加React.FC类型注解
// 18. 缩进规范：
//     - 使用4个空格进行缩进，禁止使用Tab键
//     - 接口定义、变量声明、函数体内部均使用4个空格缩进
//     - JSX元素内部使用4个空格缩进
//     - 组件属性多行排列时，每行前使用4个空格缩进
//     - 保持一致的空行使用：代码块之间使用两个空行，函数之间使用一个空行
// 项目统一开发规范：
// 1. 使用mobx进行状态管理
// 2. 使用module.less进行样式隔离
// 3. 组件化开发，逻辑与视图分离
// 4. 类型定义清晰，使用TypeScript
// ai 你不要删除上面的这些提示词
// ============================= //
/*
 * @Author: AI Assistant
 * @Date: 2024-05-07 15:30:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2024-05-07 15:30:00
 */


import { observer } from 'mobx-react-lite';
import { ReactNode, useEffect } from 'react';
import styles from './pageTemplate.module.less';
import pageTemplateStore from './PageTemplateStore';

// PC端组件推荐使用Ant Design组件库
import { PlusOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, Modal, Typography, message } from 'antd';

// 子组件都需要包含在一个文件夹内
import Lable from './Lable/Lable';

// 直接使用Typography组件的方式

// 组件props接口定义
interface Iprops {
    children?: ReactNode;
}

// 重要：组件函数不要使用React.FC类型注解
const PageTemplate = observer((props: Iprops) => {
    // 从store中获取状态
    const { value1, value2, loading, isModalVisible, modalTitle } = pageTemplateStore;

    // 表单实例
    const [form] = Form.useForm();

    // 页面生命周期：首次加载时执行
    useEffect(() => {
        // 页面加载时的初始化逻辑
        // 在useEffect中使用store状态值时，必须通过store对象访问
        pageTemplateStore.initData();
    }, []);

    // 表单提交处理
    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            const success = await pageTemplateStore.handleSubmit(values);
            if (success) {
                form.resetFields();
                message.success('操作成功');
            }
        } catch (error) {
            console.error('操作失败:', error);
        }
    };

    return (
        <div className={styles.PageTemplate}>
            {/* PC端页面标题区域 */}
            <div className={styles.header}>
                <Typography.Title level={4}>PC页面模板</Typography.Title>
                <Typography.Text>这是一个标准的PC端页面模板示例</Typography.Text>
            </div>

            {/* PC端内容区域，使用Card组件 */}
            <Card className={styles.content_card} variant="outlined">
                {/* 操作按钮区域 */}
                <div className={styles.action_buttons}>
                    <Button
                        type="primary"
                        icon={<PlusOutlined />}
                        onClick={() => {
                            pageTemplateStore.openAddModal();
                            form.resetFields();
                        }}
                        loading={loading}
                    >
                        添加数据
                    </Button>
                </div>

                {/* 数据展示区域 */}
                <div className={styles.data_display}>
                    <div className={styles.data_item}>
                        <Typography.Text strong>基本状态值1: </Typography.Text>
                        <Typography.Text>{value1}</Typography.Text>
                    </div>
                    <div className={styles.data_item}>
                        <Typography.Text strong>基本状态值2: </Typography.Text>
                        <Typography.Text>{value2}</Typography.Text>
                    </div>
                </div>

                {/* 子组件使用 */}
                <div className={styles.child_components}>
                    <div className={styles.child_component_title}>
                        <Typography.Text strong>标签组件演示：</Typography.Text>
                    </div>
                    <div className={styles.label_group}>
                        <Lable text="默认标签" />
                        <Lable text="主要标签" type="primary" />
                    </div>
                </div>

                {/* 传入的子组件 */}
                {props.children && <div className={styles.children_container}>{props.children}</div>}
            </Card>

            {/* 添加/编辑弹窗 */}
            <Modal
                title={modalTitle}
                open={isModalVisible}
                onOk={handleSubmit}
                onCancel={() => {
                    pageTemplateStore.handleCancel();
                    form.resetFields();
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                >
                    <Form.Item
                        name="name"
                        label="名称"
                        rules={[{ required: true, message: '请输入名称' }]}
                    >
                        <Input placeholder="请输入名称" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
});

export default PageTemplate;